<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
    <head>        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">                                 	   
</head>
    
    <body>
        <section data-role="page" id="contactDetail">  
        	<div data-role="header"> 
        	    <a href="../index.jsp" data-icon="back">Back</a>          	 
            	<h1><s:text name="global.contactDetail"/></h1>            	                            
        	</div>  
      
        	<div data-role="content">         	             
              <div style="border: 0px solid red;height:auto;margin:0px;">
              
                 <div style="border: 1px solid #CCC;background:#EEE;height:100px;margin:5px;" class="ui-shadow ui-corner-top ui-corner-bottom">                 
                    <div style="border:0px solid red;display:inline-block;">
                      <div id="aliasTextId" style="border:0px solid red;display:block; margin:10px 0px 0px 18px;font-family:Helvetica,Arial,sans-serif;color:black;font-weight:bold;font-size:23px;text-shadow: 0 1px 0 white;" >                                      	    
                 	  </div>
                 	  <div id="titleTextId" style="border:0px solid red;display:block; margin:2px 0px 0px 28px;font-family:Helvetica,Arial,sans-serif;color:black;font-weight:bold;font-size:12px;text-shadow: 0 1px 0 white;">                 	     
                 	  </div>
                 	  <div id="departmentTextId" style="border:0px solid red;display:block; margin:18px 0px 20px 18px;font-family:Helvetica,Arial,sans-serif;color:black;font-weight:bold;text-shadow: 0 1px 0 white;">                 	     
                 	  </div>
                 	</div>
                 	<div style="border:1px solid black;right:21px;position:absolute;display:inline-block;width:90px;height:92px;margin:3px 3px 0px;" class="ui-corner-top ui-corner-bottom" >
                 	  <img src="../images/defaultUser.png" style="width:90px;padding:1px;"/>               	     
                	</div>                 	
                 </div>
                 
                 <div style="border: 0px solid red;height:auto;margin:5px;display:block;">
                    <ul data-role="listview" data-inset="true" >
					<li>
							<div style="display:inline-block;">Mobile:</div>
						  	<div id="mobileTextId" style="display:inline-block;"></div>
					 </li>
					 <li>
							<div style="display:inline-block;">Email:</div>
						  	<div id="emailDetailTextId" style="display:inline-block;"></div>
					 </li>
					 <li>
							<div style="display:inline-block;">Phone:</div>
						  	<div id="phoneTextId" style="display:inline-block;"></div>
					 </li>
					 <li>
							<div style="display:inline-block;">Fax:</div>
						  	<div id="faxTextId" style="display:inline-block;"></div>
					 </li>
					 <li>
							<div style="display:inline-block;">Office:</div>
						  	<div id="officeTextId" style="display:inline-block;"></div>
					 </li>					 
				
				   </ul>
                 </div>
                 <div style="text-align:center;padding-bottom:10px;">
                    <a href="#" data-role="button" data-icon="add" data-inline="true" data-theme="a">Save To Phone</a>
                 </div>                 
              </div>                                                       
            </div> 
            
            <div data-role="footer" id="footer" data-position="fixed">  
              <div data-role="navbar">  
                <ul>                    
                    <li><a id="phoneIconId" href="#" data-role="button" data-icon="phone">Phone</a></li>  
                    <li><a id="chatIconId" href="#" data-role="button" data-icon="chat">Chat</a></li>  
                    <li><a id="emailIconId" href="#" data-role="button" data-icon="email">Email</a></li>  
                    <li><a id="favIconId" href="#" data-role="button" data-icon="star">Favourite</a></li> 
                    <li><a id="shareIconId" href="#" data-role="button" data-icon="share">Share</a></li> 
                </ul>  
              </div>  
            </div>   
        
        </section>
        
        
        <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>		         	    	    	      	    	    
	  	<script type="text/javascript" src="../js/contact.js"></script>
		<script type="text/javascript">					    
			
															
		</script>		
		<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>		
    </body>
</html>